Robustes Laden von Ressourcen in React: Fehlergrenzen mit Hooks meistern

In modernen Webanwendungen ist das asynchrone Laden von Ressourcen eine gängige Praxis. Ob es darum geht, Daten von einer API abzurufen, Bilder zu laden oder Module zu importieren – die Behandlung potenzieller Fehler beim Laden von Ressourcen ist für eine reibungslose Benutzererfahrung entscheidend. React Error Boundaries (Fehlergrenzen) bieten einen Mechanismus, um JavaScript-Fehler an jeder Stelle im Komponentenbaum ihrer untergeordneten Komponenten abzufangen, diese Fehler zu protokollieren und eine Fallback-UI anzuzeigen, anstatt die gesamte Anwendung zum Absturz zu bringen. Dieser Artikel untersucht, wie man Fehlergrenzen in Verbindung mit React Hooks effektiv zur Verwaltung von Fehlern beim Laden von Ressourcen einsetzt.

Grundlagen von Fehlergrenzen

Vor React 16 führten unbehandelte JavaScript-Fehler während des Renderings von Komponenten dazu, den internen Zustand von React zu beschädigen und bei nachfolgenden Render-Vorgängen kryptische Fehler zu verursachen. Fehlergrenzen begegnen diesem Problem, indem sie als „Catch-All“-Blöcke für Fehler fungieren, die in ihren untergeordneten Komponenten auftreten. Es handelt sich um React-Komponenten, die eine oder beide der folgenden Lebenszyklusmethoden implementieren:

• static getDerivedStateFromError(error): Diese statische Methode wird aufgerufen, nachdem ein Fehler von einer untergeordneten Komponente geworfen wurde. Sie erhält den geworfenen Fehler als Argument und gibt einen Wert zurück, um den Zustand der Komponente zu aktualisieren.
• componentDidCatch(error, info): Diese Lebenszyklusmethode wird aufgerufen, nachdem ein Fehler von einer untergeordneten Komponente geworfen wurde. Sie erhält den geworfenen Fehler als Argument sowie ein Objekt mit Informationen darüber, welche Komponente den Fehler geworfen hat. Sie können sie zur Protokollierung von Fehlerinformationen verwenden.

Wichtig ist, dass Fehlergrenzen nur Fehler in der Rendering-Phase, in Lebenszyklusmethoden und in Konstruktoren des gesamten Baumes unter ihnen abfangen. Sie fangen Fehler nicht ab für:

• Event-Handler (mehr dazu im folgenden Abschnitt)
• Asynchronen Code (z.B. setTimeout- oder requestAnimationFrame-Callbacks)
• Serverseitiges Rendering
• Fehler, die in der Fehlergrenze selbst (statt in ihren Kindern) geworfen werden

Fehlergrenzen und React Hooks: Eine leistungsstarke Kombination

Während traditionell Klassenkomponenten zur Implementierung von Fehlergrenzen verwendet wurden, bieten React Hooks einen prägnanteren und funktionaleren Ansatz. Wir können einen wiederverwendbaren useErrorBoundary-Hook erstellen, der die Fehlerbehandlungslogik kapselt und eine bequeme Möglichkeit bietet, Komponenten zu umschließen, die beim Laden von Ressourcen Fehler auslösen könnten.

Einen benutzerdefinierten useErrorBoundary-Hook erstellen

Hier ist ein Beispiel für einen useErrorBoundary-Hook:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Erklärung:

• useState: Wir verwenden useState, um den Fehlerzustand zu verwalten. Es setzt den Fehler anfangs auf null.
• useCallback: Wir verwenden useCallback, um die Funktionen resetError und captureError zu memoizieren. Dies ist eine gute Praxis, um unnötige Neu-Renderings zu verhindern, wenn diese Funktionen als Props weitergegeben werden.
• ErrorBoundary Komponente: Dies ist eine mit useCallback erstellte funktionale Komponente, die children und eine optionale fallback-Prop entgegennimmt. Wenn ein Fehler im Zustand vorhanden ist, rendert sie entweder die bereitgestellte fallback-Komponente oder eine Standard-Fehlermeldung. Andernfalls rendert sie die Kinder. Dies fungiert als unsere Fehlergrenze. Das Abhängigkeitsarray `[error]` stellt sicher, dass sie bei einer Änderung des `error`-Zustands neu gerendert wird.
• captureError Funktion: Diese Funktion wird verwendet, um den Fehlerzustand zu setzen. Sie rufen diese innerhalb eines try...catch-Blocks beim Laden von Ressourcen auf.
• resetError Funktion: Diese Funktion löscht den Fehlerzustand, sodass die Komponente ihre Kinder neu rendern kann (und möglicherweise den Ladeversuch der Ressource wiederholt).

Implementierung des Ressourcenladens mit Fehlerbehandlung

Sehen wir uns nun an, wie dieser Hook verwendet wird, um Fehler beim Laden von Ressourcen zu behandeln. Betrachten wir eine Komponente, die Benutzerdaten von einer API abruft:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry